<template>
  <div class="container">
     <Tabbar  style="position:fixed; background-color:#fff; z-index:999"/>
      <!-- <van-loading type="spinner" color="#1989fa" v-if="this.data4.length == 0" style="position:absolute;top:50%;left:50%"/> -->
   
    
    <div style="height:55px"></div>
    <van-cell title="申请人" :value="approver_name"/>
    <van-cell title="申请时间" :value="apply_time"/>
    <!-- 物料列表 -->
    <van-list>
      <div v-for="item in goodlist" :key="item.id">
      <van-swipe-cell style="margin-bottom:10px;">
            <van-card
              :num="item.buy_num"
              :desc="item.product_type"
              :title="item.product_name"
              :price="item.unit_price"
            />
            <span class="type">总价：{{item.total_price}}</span>
          </van-swipe-cell>
      </div>
    </van-list>
    <!-- 审核流程 -->
    <van-cell title="审核流程"/>
    <van-steps direction="vertical">
      <van-step style="height:80px; display:none;">
        <h4>【城市】物流状态1</h4>
        <p>2016-07-12 12:40</p>
      </van-step>
      <div v-for="(item,index) in process" :key="index">
        <van-step>
          <h2>{{item.approver_name}}</h2>
           <!-- <img :src="item.signpath" alt="" style="width:70px;height:50px;position:absolute;top:40px;left:170px;" v-show="item.flag"> -->
          <p>{{item.order_time}}</p>
          <span style="position:absolute;top:50%;right:30px">{{item.yesorno}}</span>
          <span>{{item.remarks}}</span>
        </van-step>
      </div>
    </van-steps>
  </div>
</template>
<script>
import axios from "axios";
import { getCookie } from "Utils/cookie";
import { Toast} from "vant";
import { setTimeout } from 'timers';
import Tabbar from 'Comp/Tabbar'
export default {
  data() {
    return {
      message:'',
        list:[],
        approver_name:'',
        apply_time:'',
        goodlist:[],
        process:[],
        apply_id:'',
        step_num:'',
        ask_prople:'',
        goodspirce:[],
        user_id:'',
        user_name:'',
        start_id:'',
        start_name:'',
    };
  },
  components:{
    Tabbar,
  },
  methods: {
    
  },
  mounted() {
      this.list = JSON.parse(this.$route.query.data)
      console.log('124578',JSON.parse(this.$route.query.data))
   axios({
      url:'/hrkc/buyApply/queryIngDetail',
      method:'GET',
      params:{
        apply_id:this.list.apply_id
        },
   }).then(res=>{
       console.log('结果',res)
       this.approver_name = res.data.data2[0].apply_user
      this.apply_time = res.data.data2[0].apply_date.substring(0,res.data.data2[0].apply_date.length-5)
        for(var i=0; i<res.data.data1.length;i++){
                this.goodlist.push({
                    buy_num:res.data.data1[i].buy_num,
                    product_type:res.data.data1[i].product_type,
                    product_name:res.data.data1[i].product_name,
                    id:res.data.data1[i].id,
                    unit_price:res.data.data1[i].unit_price,
                    total_price:res.data.data1[i].total_price,
            })
    }
     for(var i=0; i<res.data.data3.length;i++){
            this.process.push({
              approver_name:res.data.data3[i].user_name,
              order_time:res.data.data3[i].step_date,
              yesorno:res.data.data3[i].step_advice,
              remarks:res.data.data3[i].step_reason,
            })
        }
        console.log('123456',this.process)
   })
  }
};
</script>
<style lang="scss" scoped>
.van-card {
  height: 90px;
}
.van-card__content {
  height: 60px;
}
.van-card__title {
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}
.van-card__desc {
  height: 20px;
  line-height: 20px;
  font-size: 10px;
}
.van-card__num {
  margin-top: -80px;
  font-size: 10px;
}
.van-card__footer {
  margin-top: -60px;
}
.type{
position: absolute;
top:60px;
left:200px
}
.price{
  li{
    .name{
      margin-top:15px; 
    }
    height:20px;
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
    input{
      width:90px;
      border: none;
      background-color:#FAFAFA;
      text-align: center;
    }
  }
}
</style>
